<!-- 新增/编辑指标 -->
<template>
  <a-drawer
    width="45%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> {{ props.data?.id ? '编辑指标' : '新增指标' }} </template>
    <div>
      <a-form
        :model="formData.data"
        ref="refForm"
        :rules="rules"
        auto-label-width
      >
        <a-form-item label="指标名称" field="name" show-colon>
          <a-input v-model="formData.data.name"></a-input>
        </a-form-item>
        <a-form-item label="指标定义" field="definition" show-colon>
          <a-textarea
            v-model="formData.data.definition"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item
          label="评分标准"
          field="performanceAbilityQualityIndexLibraryScoringStandard"
          show-colon
        >
          <div style="width: 100%">
            <a-form-item
              v-for="(item, index) in formData.data
                .performanceAbilityQualityIndexLibraryScoringStandard"
              :label="getLable(item.type)"
              :key="index"
              :field="`performanceAbilityQualityIndexLibraryScoringStandard.${index}.value`"
              :rules="[
                {
                  required: true,
                  message: '请输入'
                }
              ]"
            >
              <div style="width: 100%">
                <a-textarea v-model="item.value" />
              </div>
            </a-form-item>
          </div>
        </a-form-item>
        <a-form-item label="状态" field="" show-colon>
          <a-switch
            v-model="formData.data.status"
            :checked-value="1"
            :unchecked-value="2"
            size="medium"
          >
            <template #checked> 启动 </template>
            <template #unchecked> 停止 </template>
          </a-switch>
          <!-- <a-radio-group v-model="formData.data.status">
            <a-radio :value="1">启动</a-radio>
            <a-radio :value="2">停止</a-radio>
          </a-radio-group> -->
        </a-form-item>
      </a-form>
      <!-- <a-form-item label="评分方式" field="markWay" show-colon>
        <a-radio-group v-model="formData.data.mark">
          <a-radio :value="1">直接输入</a-radio>
          <a-radio :value="2">公式计算</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注" field="remark" show-colon>
        <a-textarea
          v-model="formData.data.remark"
          show-word-limit
          :max-length="50"
          :auto-size="{
            minRows: 4
          }"
        ></a-textarea>
      </a-form-item> -->
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button v-if="isShowContinueBtn" type="primary" @click="continueAdd"
          >确认并继续新增</a-button
        >
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { GetBpiIndexRepeat } from '@/apis/management/performance/baseSetting/template';
import { BpiIndex } from '@/apis/management/performance/baseSetting/template/type';
import { cloneDeep } from 'lodash';
import CountSetting from '../CountSetting/index.vue';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: any; // 传进来的数据,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'indexEmit']);
let refForm = ref();
let countSettingVisiable = ref(false); // 是否设置计算公式弹出框
let isShowContinueBtn = ref(true); // 是否显示继续新增按钮

const formData = reactive<{ data: BpiIndex }>({
  data: {
    name: '', // 指标名称
    definition: '', // 指标定义
    performanceAbilityQualityIndexLibraryScoringStandard: [],
    status: 1
  }
});
const getLable = (n: any) => {
  switch (n) {
    case 1:
      return '优秀';
    case 2:
      return '良好';
    case 3:
      return '一般';
    case 4:
      return '较差';
    case 5:
      return '差';
    default:
      return '错误';
  }
};
// name查重函数
const validateName = async (name: string, cb: any) => {
  try {
    if (name === props.data.name && props.data.id) {
      //
    } else {
      const data = {
        name
      };
      const res = await GetBpiIndexRepeat(data);
      if (res?.code === 400) {
        cb(`名称已存在`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
const rules = reactive({
  type: [
    {
      required: true,
      message: '请输入'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  performanceAbilityQualityIndexLibraryScoringStandard: [
    {
      required: true,
      message: '请输入'
    }
  ]
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    // 如果是编辑，则赋值给formData
    if (newVal) {
      if (props.data) {
        formData.data = cloneDeep(props.data);
        isShowContinueBtn.value = false;
      }
    } else {
      isShowContinueBtn.value = true;
    }
  }
);

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('indexEmit', cloneDeep(formData.data));
  emits('update:visible', false);
};

const continueAdd = () => {
  emits('indexEmit', cloneDeep(formData.data), true);
  emits('update:visible', true);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
